<template>
    <div style="padding-left: 17px;">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:200px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{Username}}</div>
                            <div>{{role}}</div>
                            <div class="user-info-list">上次登录时间：2018-01-01</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" style="height:200px;">
                    Vue
                    <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
                    <el-progress :percentage="3.7"></el-progress>HTML
                    <el-progress :percentage="0.9" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    data() {
        return {
            Username: $cookies.get('tokenpa').title, //账号
            name: $cookies.get('tokenpower'), //权限
            service: '' //客服数量
        };
    },
    /*  created() {
        this.$http
            .post(
                '/api/api/user/kefulist',
                Qs.stringify({
                    name: $cookies.get('tokenpa').title, //用户账号
                    form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                    token: $cookies.get('tokenpa').token //当前登录令牌
                }),
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    this.service = obtain.body.data.length;
                } else {
                    this.$cookies.remove('tokenpa'); //删除账号
                    this.$cookies.remove('tokenpower'); //删除用户身份
                    this.$cookies.remove('tokenform'); //删除登录令牌
                    this.$message.error({
                        message: obtain.body.msg,
                        duration: 1000,
                        onClose: function() {
                            console.log(123);
                            window.location = './login';
                            //this.$router.push('/login');
                        }
                    });
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            });
    }, */
    computed: {
        role() {
            //return this.name === '0' ? '超级管理员' : '客服';
            if (this.name === '0') {
                return '公司高级管理员';
            } else if (this.name === '1') {
                return '公司管理员';
            } else if (this.name === '2') {
                return '机构高级管理员';
            } else if (this.name === '3') {
                return '机构管理员';
            } else {
                return '客服';
            }
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}
.user-info-name {
    margin-bottom: 10px;
}
.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
    margin-top: 10px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}
</style>
